<template>
  <div class="all">
    <video id="video-bg" autoplay muted loop style="width: 100%;">
      <source src="@/assets/img/login/login2/bg.mp4" type="video/mp4" />
      您的浏览器不支持视频播放 。
    </video>

    <div class="all-box">

      <div class="right">

        <div class="right-con">
          <div class="destion"></div>
          <div class="tit">
            {{ title }}
          </div>

          <el-form
            ref="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
            label-position="top"
            :model="loginForm"
            hide-required-asterisk
          >
            <el-form-item label="用户名" prop="username" class="label-box" >
              <div class="deep-input">
                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  prefix-icon="User"
                  name="username"
                  type="text"
                  tabindex="1"
                  autocomplete="on"
                  class="input-box"
                />
              </div>

            </el-form-item>
            <el-form-item label="密码" prop="password" class="label-box">

              <el-tooltip v-model="capsTooltip" content="大写键已打开" placement="left" trigger="focus">
                <el-input

                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"

                  :type="passwordType"
                  placeholder="请输入密码"
                  prefix-icon="Lock"
                  name="password"
                  tabindex="2"
                  autocomplete="on"
                  @keyup="checkCapslock"
                  @blur="capsTooltip = false"
                  @keyup.enter="handleLogin"
                >
                  <template #suffix>
                    <div class="icon">
                      <svg-icon :icon-class="passwordType === 'password' ? 'ui-eye' : 'ui-hide'" color="gray" @click="showPwd"/>
                    </div>

                  </template>
                </el-input>
              </el-tooltip>

            </el-form-item>
            <el-form-item v-if="errorTime >= 3" label="验证码" prop="identify" class="label-box">

              <el-row style="height: 3.125vw">
                <el-col :span="18">
                  <el-input
                    ref="username"
                    v-model="loginForm.identify"
                    prefix-icon="Postcard"
                    placeholder="验证码"
                    name="identify"
                    type="text"
                    tabindex="3" />
                </el-col>
                <el-col :span="6" style="line-height:2.125vw">
                  <indentify ref="identify" :identify-code="identifyCode" :content-width="80" @click="makeCode" />
                </el-col>
              </el-row>
            </el-form-item>

            <el-button
              class="login-btn"
              :loading="loading" type="primary"
              @click="handleLogin">
              登录
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixin } from './mixin'
export default {
  name: 'Login2',
  mixins: [mixin]

}
</script>

<style lang="scss" scoped>
.el-form {
  position: relative;
  margin-right: 0;
  margin-left: 0;

  .login-btn{
    position: absolute;
    bottom: -10.5vh;
    z-index: 102;
  }
}
.el-input{
  border: none;
}

*{
  margin: 0;
  padding: 0;
}

#video-bg{
  position: fixed;
}

.all{
  position: fixed;
  display: flex;
  width: 100%;
  height: 100vh;

    .all-box{
      display: flex;
      width: 100%;
      height: 100%;
    }

  .right {
    .right-f1{
      // margin-top: 0.521vw;
      margin-bottom: 2.5vw;
      // position: relative;
      color: #FFC700;
      font-weight: 500;
      font-size: 1.354vw;

      div{
        top: 30%;
        // position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    }

    position: relative;
    width: 100%;
    height: 100%;

    .right-con{
    position: absolute;
    right: 10%;
    box-sizing: border-box;
    width: 30%;
    // margin-left: 10.573vw;
      height: 70%;
    margin-top: 7.135vw;
    padding: 2.396vw 2.604vw 10%;
    background-color: #fff;
    border-radius: 0.521vw;

      .destion{
        position: absolute;
        top: 0;
        left: 0;
        width: 29.948vw;
        height: 0.26vw;
        background-color: #1762F2;
        border-radius:0.521vw 0.521vw 0 0 ;
      }

    .tit {
      margin-bottom: 2.604vw ;
      color: #1762F2;
        font-weight: 500;
        font-size: 1.667vw;
        text-align: center;
      }

      .line-box{
        display: flex;
        justify-content: center;
        margin-bottom: 0.521vw;

        .line{
         display: block;
         width: 2.396vw;
         height: 0.521vw;
         margin-top: 0.469vw;
         background: #1762F2;
         border-radius: 0.26vw;
         }
      }

        .el-form--label-top .el-form-item :deep(.el-form-item__label)  {
          margin-bottom: 1.094vw;
          color: #b7b7b7;
          font-weight: 600 !important;
          font-size: 0.781vw !important;
          letter-spacing: 0.313vw;
          // margin-top: 2.344vw;
        }

          .icon{
            svg{
              width: 1.302vw !important;
              height: 1.719vw !important;
            }

          }

        :deep(.el-icon svg) {
          width: 1.042vw;
          height: 1.198vw;
        }

      .login-form {
        .label-box{
          margin-bottom: 2.344vw;
        }

        :deep(.el-button){
          width: 100%;
          height: 3.125vw;
          color: #FFF;
          font-weight: 500;
          // border-radius: 2.083vw;
          font-size: 0.781vw;
          font-family: PingFangSC-Semibold, "PingFang SC";
          background: #1762F2;
          border: none;
          box-shadow: 0 0 1.146vw 0 rgb(23 98 242 / 21%);
          // letter-spacing: 0.521vw;
        }

          .el-input__inner{
                        border-color: black;
            border-width: 0 0 0.052vw;
          }

        :deep(.el-input__inner) {
                font-weight: 500;
                font-size: 1.042vw;
                font-family: PingFangSC-Medium, "PingFang SC";
                line-height: 1.458vw;

        }

        .el-form-item__content{
          .el-input{
            height: 3.125vw;
            border-radius:0;

            :deep(.el-input__wrapper){
              border-bottom: 0.104vw solid #ccc;
              border-radius: 0 !important;
              box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
            }
          }
        }

      }
    }

  }
}
</style>
